<template>
	<view class="swiper-section">
		<swiper class="swiper" circular autoplay interval="3000" duration="500">
			<swiper-item v-for="(item, index) in swiperList" :key="index">
				<image class="swiper-img" :src="item.url" mode="aspectFill"></image>
				<view class="swiper-text">{{ item.text }}</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup>
	const swiperList = ref([]);

	onMounted(() => {
		const list = useCompanyStore().GetBannerList();
		if (list && list.length) {
			list.forEach((element) => {
				element.url = useRuntimeConfig().target.UPLOADURL + element.refId;
			});
		}
		swiperList.value = list;
	});
</script>

<style lang="scss" scoped>
	// 轮播图区域
	.swiper-section {
		width: 100%;
		height: 200px;
		margin-bottom: 15px;
		border-radius: 12px;
		overflow: hidden;
		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
		position: relative;
		border: 1px solid rgba(255, 255, 255, 0.3);
		
		.swiper {
			width: 100%;
			height: 100%;

			&-item {
				overflow: hidden;
			}
		}

		.swiper-img {
			width: 100%;
			height: 100%;
			transition: all 0.5s ease;
			transform: scale(1.05);

			&:hover {
				transform: scale(1);
			}
		}

		.swiper-text {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			padding: 12px;
			background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
			color: white;
			font-size: 14px;
			font-weight: 500;
			letter-spacing: 1px;
			transform: translateY(0);
			transition: all 0.3s ease;
		}
	}
</style>
